<template>
  <!-- 合同信息 -->
    <div class="tobeDone">
        <div class="d-flex a-center">
            <public-search
                    :fields="fields"
                    :search-param="form"
                    @on-query="onQuery"
                    @on-reset="onReset"
            />
            <el-divider direction="vertical" class="m-b10"/>
            <el-button class="button_view m-b10 m-l10" @click="addHandle">新增</el-button>
        </div>
        <public-table
                ref="publicTableRef"
                index
                :selection="false"
                :indexWidth="'100'"
                :page="page"
                height="550"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
        >
            <template #buttons="scope">
                <div>
                    <el-button @click="toDetail(scope.row)" style="margin-left: 0 !important;" size="small" class="button_edit m-b5">{{scope.row.status===3?'编辑':'查看'}}</el-button>
                    <el-button style="margin-left: 0 !important;" class="button_funtion2 m-b5 m-r10" size="small" @click="openPopup(scope.row)">合同账单</el-button>
                </div>
            </template>
        </public-table>
    </div>

    <contract-dialog ref="contractDialogRef"/>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import PublicTable from "@/components/PublicTable";
import PublicSearch from "@/components/PublicSearch";
import {tableCommonFun} from "@/hooks/tableCommon";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {useRouter} from "vue-router";
import ContractDialog from "./components/contractDialog.vue";


const interfaceConfig = reactive({
    fileName:'project',
    apiPath:'designProject.getContractPage',
});

const exportConfig = reactive({
    fileName:'investment',
    apiPath:'projectSetApi.exportProjectSet',
    tableName:'项目集表'
});

/**
 * 默认参数
 * @type {UnwrapNestedRefs<{prepareStatus: number}>}
 */
const defaultParameters = reactive({

});

const {
    form,
    page,
    tableOption,
    tableData,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport
}  = tableCommonFun(interfaceConfig,exportConfig,defaultParameters);

form.value = {
    contractName:'',
    year:'',
    quarter:''
}

const fields = ref([
    {   type:'input',
        label:'合同名称',
        key:'contractName',
        placeholder:'请输入合同名称',
        clearable:true
    },
    {
        type:'year',
        label:'年度',
        key:'year',
        placeholder:'请选择年度',
        clearable:true
    },
    {
        type:'select',
        label:'季度',
        key:'quarter',
        placeholder:'请选择季度',
        clearable:true,
        options:{
            labelKey:'label',
            valueKey:'value',
            list:[
                {
                    value: '',
                    label: "全部",
                },
                {
                    value: '1',
                    label: "一季度",
                },
                {
                    value: '2',
                    label: "二季度",
                },
                {
                    value: '3',
                    label: "三季度",
                },
                {
                    value: '4',
                    label: "四季度",
                },
            ]
        }
    },
]);

tableOption.value = [
    { label: "合同编号", prop: "contractId", minWidth: 100 },
    { label: "合同名称", prop: "contractName", minWidth: 100 },
    { label: "签约对象", prop: "signB", minWidth: 100 },
    { label: "项目名称", prop: "projectName", minWidth: 100 },
    { label: "类型", prop: "contractChildCategory", formatter: (val) => {
            return {'1':'设计合同','2':'图审合同','3':'勘察合同','4':'测绘合同','5':'安评合同','6':'资讯合同','7':'鉴定合同','8':'策划合同','9':'其他合同',}[val];
        }, minWidth: 100},
    { label: "合同金额", prop: "contractAmount", minWidth: 100 },
    { label: "当前年度", prop: "year", minWidth: 100 },
    { label: "已支付年度金额", prop: "yearPaid", minWidth: 130 },
    { label: "当前季度", prop: "quarter", minWidth: 100 },
    { label: "已支付季度金额", prop: "quarterPaid", minWidth: 130 },
    { label: "合同经办部门", prop: "departmentName", minWidth: 130 },
    { label: "经办人", prop: "userName", minWidth: 100 },
    { label: "审批状态", prop: "examineStatus",formatter: (val) => {
            return {'1':'待审核','2':'已通过','3':'驳回',}[val];
        }, minWidth: 100},
     {
         label: '操作',
         slot: true,
         width: 200,
         overHidden: false,
         slotName: 'buttons',
         fixed: "right"
     },
];

const router = useRouter();

/**
 * 跳转详情/查看
 */
const toDetail = (row) => {
    router.push({path:`/designManagement/contractInformation/contractDraft/status=${row.examineStatus}&contractId=${row.contractId}`})
}

/**
 * 新增
 */
const addHandle = () => {
    router.push({path:`/designManagement/contractInformation/contractDraft/status=`})
}

const contractDialogRef = ref(null);

/**
 * 打开弹窗
 */
const openPopup = (row) => {
    contractDialogRef.value.state.dialogVisible = true;
    contractDialogRef.value.state.contractId = row.contractId;
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:50,
        param:{
            ...form.value
        }
    });
})
</script>

<style lang="scss" scoped>
.tobeDone {
  width: 100%;
  height: 100%;
}
</style>
